<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();

// 功能列表数据
const functions = [
  { name: '留校申请记录', icon: '📋', path: '/pages/students/page3' },
  { name: '留校签到记录', icon: '📅', path: '/pages/students/page5' },
  { name: '离校申请记录', icon: '🚪', path: '/pages/students/page2' },
  { name: '返校登记记录', icon: '🏫', path: '/pages/students/page4' },
  { name: '登记重置', icon: '🔄', path: '/pages/index/index' }
];

// 底部导航配置
const tabItems = [
  {
    name: '假期批次',
    icon: '/static/tab1.png',
    url: '/pages/students/page1'
  },
  {
    name: '留校签到',
    icon: '/static/tab2.png',
    url: '/pages/students/page5'
  },
  {
    name: '更多功能',
    icon: '/static/tab3.png',
    url: '/pages/students/page6'
  }
];

const activeIndex = ref(2); // 当前激活的是更多功能页

// 处理功能项点击
const handleFunctionClick = (path) => {
  router.push(path);
};

// 处理tab点击跳转
const handleTabClick = (index, url) => {
  if (index === activeIndex.value) return;
  activeIndex.value = index;
  uni.navigateTo({ url });
};
</script>

<template>
  <view class="more-functions-page">
    <!-- 顶部导航栏 - 已删除右上角元素 -->
    <view class="top-bar">
      <text class="title">更多功能</text>
    </view>

    <!-- 功能列表 -->
    <view class="functions-list">
      <view
          class="function-item"
          v-for="(item, index) in functions"
          :key="index"
          @click="handleFunctionClick(item.path)"
      >
        <view class="item-icon">{{ item.icon }}</view>
        <text class="item-name">{{ item.name }}</text>
        <text class="arrow">→</text>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="tabbar">
      <view
          class="tab-item"
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in tabItems"
          :key="index"
          @click="handleTabClick(index, item.url)"
      >
        <image :src="item.icon" class="tab-icon" />
        <text class="tab-text">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.more-functions-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.top-bar {
  background-color: #409eff;
  color: white;
  height: 48px;
  display: flex;
  justify-content: center; /* 修改为居中对齐标题 */
  align-items: center;
  padding: 0 15px;
  position: relative;
}

.title {
  font-size: 18px;
  font-weight: 500;
}

/* 已删除.right-controls相关样式 */

/* 功能列表 */
.functions-list {
  margin-top: 10px;
}

.function-item {
  background-color: white;
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.function-item:hover {
  background-color: #f9f9f9;
}

.item-icon {
  width: 30px;
  height: 30px;
  background-color: #e8f3ff;
  color: #409eff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 16px;
}

.item-name {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.arrow {
  color: #ccc;
  font-size: 18px;
}

/* 底部导航样式 */
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.tab-item.active .tab-text {
  color: #409eff;
}

.tab-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.tab-text {
  font-size: 12px;
  color: #999;
}
</style>

